<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>富文本编辑器示例</title>
    <!-- 引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- 引入Element UI -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入WangEditor -->
    <script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
    <!-- 引入Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div id="app" style="padding: 20px;">
    <el-button type="primary" @click="showDialog = true">打开富文本编辑器</el-button>

    <el-dialog :visible.sync="showDialog" title="富文本编辑器" width="50%">
        <div id="editor" style="height: 300px;"></div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="saveContent">保存</el-button>
      </span>
    </el-dialog>

    <div v-if="savedContent" style="margin-top: 20px;">
        <h3>保存的文章内容（HTML）：</h3>
        <div v-html="savedContent"></div>
        <h3>保存的文章内容（纯文本）：</h3>
        <div>{{ savedPlainText }}</div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            showDialog: false,
            editor: null,
            editorContent: '',
            savedContent: '', // 存储保存后的HTML内容
            savedPlainText: '' // 存储保存后的纯文本内容
        },
        watch: {
            showDialog(newVal) {
                if (newVal) {
                    this.$nextTick(() => {
                        // 在弹窗打开时初始化WangEditor
                        this.initEditor();
                    });
                } else {
                    // 在弹窗关闭时，销毁编辑器
                    this.destroyEditor();
                }
            }
        },
        methods: {
            /*在初始化 WangEditor 时，我们通过配置 onchange 回调函数来更新 editorContent。
            每当用户在编辑器中输入或改变内容时，这个回调函数就会被触发，
            并将输入的内容（以 HTML 格式表示）保存到 editorContent 中。
            this.editor.config.onchange = (html) => {
            this.editorContent = html; // 更新 editorContent
        };*/
    initEditor() {
                this.editor = new window.wangEditor('#editor');
                this.editor.config.height = 300; // 设置编辑器高度
                this.editor.config.onchange = (html) => {
                    this.editorContent = html;
                };
                this.editor.create();
            },
            destroyEditor() {
                if (this.editor) {
                    this.editor.destroy();
                    this.editor = null;
                }
            },
            saveContent() {
                this.savedContent = this.editorContent; // 保存HTML内容
                this.savedPlainText = this.getPlainText(this.editorContent); // 获取纯文本内容
                console.log(this.savedContent); // 可选: 打印HTML内容
                console.log(this.savedPlainText); // 可选: 打印纯文本内容
                alert('保存成功！'); // 弹出提示框
                this.showDialog = false; // 关闭弹窗
            },
            getPlainText(html) {
                // 创建一个临时的DOM元素，用于提取纯文本内容
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = html;
                return tempDiv.innerText || tempDiv.textContent; // 获取纯文本
            }
        }
    });
</script>
</body>
</html>
